<template>
  <div>
    <div class="bread_crumb">
      <bread-crumb></bread-crumb>
    </div>
    <div class="stu_info_wrap">
      <div class="stu_info">
        <h1 class="stu_info_title">学生信息录入</h1>
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="学号" prop="stu_id">
                <el-input v-model.trim="form.stu_id"></el-input>
              </el-form-item>
              <el-form-item label="姓名">
                <el-input v-model.trim="form.stu_name"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio v-model="form.stu_sex" label="男">男</el-radio>
                <el-radio v-model="form.stu_sex" label="女">女</el-radio>
              </el-form-item>
              <el-form-item label="籍贯">
                <el-cascader
                  v-model="value"
                  :options="options"
                  :props="{
                    label: 'name',
                    value: 'name',
                  }"
                  @change="handleChange"
                ></el-cascader>
              </el-form-item>
              <el-form-item label="日期">
                <el-date-picker
                  v-model="form.stu_date"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="男女朋友">
                <el-input v-model.trim="form.stu_gbf"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="头像">
                <div>
                  <el-button @click="upLoad">点击上传图片</el-button>
                  <el-button @click="goCamera">拍照上传</el-button>
                </div>
                <input
                  type="file"
                  @change="getFile"
                  ref="getInp"
                  hidden
                  name=""
                  id=""
                />
                <div>
                  <img
                    width="150px"
                    height="150px"
                    :src="form.stu_head_img"
                    alt=""
                    srcset=""
                  />
                </div>

                <div>
                  <p>
                    注：将其转为base64字符串上传，图片大小为1M左右，否则不能上传
                  </p>
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="爱好及自我评价">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editor"
              :defaultConfig="toolbarConfig"
              :mode="mode"
            />
            <div class="wangEditWrap" style="height: 200px; overflow: hidden">
              <Editor
                style="height: 500px; overflow-y: hidden"
                v-model="html"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="onCreated"
              />
            </div>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" :plain="true" @click="onSubmit"
              >提交</el-button
            >
            <el-button type="primary" @click="goReset">重置</el-button>
            <el-button
              type="primary"
              @click="$router.push({ name: 'testResetComponent' })"
              >go testResetComponent</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
/* 
级联选择器有了数据不对  从服务器进行请求 发送ajax  接口分类  分成对应的模块
stuInfo  (该模块当中都是学生信息相关的所有接口) 
create mounted


*/
import { Cascader } from "element-ui";
import { req_area, req_stu_info } from "@/api/stuInfo.js";
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
  data() {
    return {
      form: {
        stu_id: "",
        stu_name: "",
        stu_sex: "男",
        stu_jg: "",
        stu_date: "",
        stu_hobby: "",
        stu_gbf: "",
        stu_head_img: "",
      },
      value: [],
      options: [],
      // 富文本编辑器组件的初始化数据
      editor: null,
      html: "<p>hello</p>",
      toolbarConfig: {},
      editorConfig: { placeholder: "请输入内容..." },
      mode: "default", // or 'simple'
    };
  },
  async mounted() {
    let result = await req_area();
    console.log(result);
    this.options = result.data;

    // 路由组件传值 一定注意是父子路由组件传值还是兄弟
    // 父子路由组件  我们可以通过watch监听去处理
    // 如果说是兄弟  每一次兄弟路由组件变换都是销毁与重建
    console.log(this.$route.query);
    this.form.stu_head_img = this.$route.query.imgSrc;
    console.log(this.form);
  },
  methods: {
    goCamera() {
      this.$router.push({
        name: "cameraUpload",
      });
    },
    upLoad() {
      // 点击该按钮相当于点击input
      this.$refs.getInp.click();
    },
    getFile() {
      console.log("获取图片的函数");
      let that = this;
      // 获取input files  获取文件的相关信息
      console.dir(this.$refs.getInp.files[0]);
      let f = this.$refs.getInp.files[0];
      let fr = new FileReader();
      fr.readAsDataURL(f);
      fr.onload = function () {
        // console.log(fr.result);
        that.form.stu_head_img = fr.result;
        //  Cannot set properties of undefined (setting 'stu_head_img')
        // undefined.stu_head_img
        // 报错的意思就是this.form 为 undefined   form一般不会写错  this
        // this指向不对
      };
    },
    handleChange(value) {
      console.log(value);
      // 得到的value值为数组 服务器要求的stu_jg是字符串
      // 将数组变为字符串
      this.form.stu_jg = value.join("-");
      // concat
      console.log(this.form.stu_jg);
      /* let arr1 = [1, 2];
      let arr2 = "111";
      console.log(arr1.concat(arr2)); */
    },
    async onSubmit() {
      console.log("这是提交");
      /* 
      getText()获取的是富文本编辑器当中的文本
      getHtml()获取的是富文本编辑器当中的标签
      */
      this.form.stu_hobby = this.editor.getText();
      console.log(this.form);
      // 首先收集所有的学生信息相关的数据
      // 提交给服务器  ajax
      let result = await req_stu_info(this.form);
      console.log(result);
      // 进行测试是否能传时一定要注意一个问题学号是唯一不能重复

      this.$message({
        message: "数据提交成功！！",
        type: "success",
        offset: 130,
      });
      // 清空清空内容与重置按钮的含义差不多
      // this.form
    },
    goReset() {
      console.log("这是重置");
      this.$refs.form.resetFields();
      /* 
      重置的方案：
      1.初始化数据清空
      2.element-ui 有一个form resetFields 
      3.让组件刷新，组件重新加载即它进行了刷新

      面试题 ：让组件强制刷新的方案 $forceUpdate v-if key
      v-if key 真正的组件刷新
      $forceUpdatew伪组件强制刷新

      组件TestResetComponent 组件不属于当前项目，为了讲解  组件强制刷新的方案


      */
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
  },
  components: {
    "el-cascader": Cascader,
    Editor,
    Toolbar,
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
};
</script>

<style lang="scss" scoped>
div {
  .bread_crumb {
    height: 30px;
  }
  .stu_info_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    // align-content: ;

    .stu_info {
      width: 800px;
      .stu_info_title {
        text-align: center;
        margin-bottom: 20px;
      }
    }
  }
}
</style>